<!-- 表单新增 -->

<template>
  <WebForm path="add">
    <FormInput label="节点名称" bind="name" :max="8" required />

    <FormTree label="上级节点" bind="parentId" :dict="treeDict" @change="changeParent" />

    <EasyRow col2>
      <FormNum label="排序" bind="sort" :min="1" :max="999" tip="请输入" initMin required />
    </EasyRow>

    <EasyRow col2>
      <FormSelect label="跳转逻辑" bind="jumpLogic" :dict="DICT.JUMP" noClear half required @change="changeJump" />
    </EasyRow>

    <EasyRow v-if="one.jumpLogic === 1" col2>
      <FormInput v-bind="forwordProps" />
      <FormInput v-bind="linkProps" word2 />
    </EasyRow>
    <FormLink v-if="one.jumpLogic === 2" v-bind="linkProps" />

    <FormTextarea label="备注" bind="remark" :max="100" />
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'FormAdd',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('add'), CORE.mixTree()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 链接的属性
     */
    linkProps() {
      const required = this.one.type === 2
      return {
        label: '链接',
        bind: 'jumpLink',
        noTip: !required,
        required,
      }
    },

    /**
     * 目录的属性
     */
    forwordProps() {
      return {
        ...this.linkProps,
        label: '目录',
        bind: 'forword',
        max: 255,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换类型
     */
    changeParent(parentId) {
      this.one.type = parentId ? 2 : 1
    },

    /**
     * 切换跳转
     */
    changeJump() {
      Object.assign(this.one, {
        forword: '',
        jumpLink: '',
      })
    },
  },
}
</script>
